<#include "/common/_layout.html"/>
<@layout>
	<style>
		.title {
			margin: 0;
			padding: 20px 0;
		}
		
		#app {
			padding: 0 20px;
		}
	</style>
	<div id="app">
		<el-form ref="form" :inline="true" :model="search" label-width="100px">
			<el-form-item label="商品品牌" prop="goods_brand">
				<el-select v-model="search.goods_brand" placeholder="请选择">
					<el-option v-for="item in brand" :key="item.id" :label="item.brand_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品类型" prop="goods_type">
				<el-select v-model="search.goods_type" placeholder="请选择">
					<el-option v-for="item in type" :key="item.id" :label="item.type_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品规格" prop="goods_spec">
				<el-input v-model.trim="search.goods_spec"></el-input>
			</el-form-item>
			<el-button type="primary" icon="plus" @click="queryList(1)">搜索</el-button>
		</el-form>

		<el-table ref="table" :data="tableData" border style="margin-top: 10px;" @selection-change="handleSelectionChange" v-loading="loading" element-loading-text="拼命加载中">
			<el-table-column type="selection" align='center'>
			</el-table-column>
			<el-table-column prop="brand_name" label="品牌" align='center' width="250">
			</el-table-column>
			<el-table-column prop="type_name" label="类型" align='center' width="150">
			</el-table-column>
			<el-table-column prop="goods_spec" label="型号" align='center'>
			</el-table-column>
			<el-table-column prop="goods_price" label="单价" align='center' width="120">
			</el-table-column>
			<el-table-column prop="status" label="状态" align='center' width="90">
				<template scope="scope">
					<el-tag v-if="scope.row.status == '0'" type="success">正常</el-tag>
					<el-tag v-else-if="scope.row.status == '1'" type="danger">已废弃</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 10px;" ref="pagination" :total="pagination.total" :current-page="pagination.currentPage" :page-size="pagination.pageSize" :page-sizes="[5]" @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" layout="prev, pager, next, total, sizes">
		</el-pagination>

		<el-row class="lb_form_button" style="width: 85%;">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button type="danger" @click="closeDlalog">关闭</el-button>
		</el-row>
	</div>

	<script type="text/javascript">
		var resultData = [];
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					search: {
						goods_spec: "",
						goods_brand: "",
						goods_type: ""
					},
					multipleSelectionAll: [], //所有选中的数据包含跨页数据
					multipleSelection: [],
					idKey: 'id', // 标识列表数据中每一行的唯一键的名称
					brand: eval('${brand}'),
					type: eval('${type}'),
					loading: true,
					tableData: [],
					pagination: {
						total: 0,
						pageSize: 5,
						currentPage: 1
					}
				}
			},
			methods: $.extend(commonMethods, {
				submit: function() {
					top.selectCallBack(this.multipleSelectionAll);
					this.closeDlalog();
				},
				closeDlalog: function() {
					//关闭当前这个iframe的dialog
					parent._vue[window.frameElement.id].dialogVisible = false;
				},
				handleSelectionChange: function(val) {
					this.multipleSelection = val;
					var that = this;
					//实时记录选中的数据
					setTimeout(function() {
						that.changePageCoreRecordData();
					}, 50)

				},
				setSelectRow: function() {
					if(!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
						return;
					}
					// 标识当前行的唯一键的名称
					var idKey = this.idKey;
					var selectAllIds = [];
					var that = this;
					this.multipleSelectionAll.forEach(function(row) {
						selectAllIds.push(row[idKey]);
					});
					this.$refs.table.clearSelection();
					for(var i = 0; i < this.tableData.length; i++) {
						if(selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
							// 设置选中，记住table组件需要使用ref="table"
							this.$refs.table.toggleRowSelection(this.tableData[i], true);
						}
					}
				},
				// 记忆选择核心方法
				changePageCoreRecordData: function() {
					// 标识当前行的唯一键的名称
					var idKey = this.idKey;
					var that = this;
					// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
					if(this.multipleSelectionAll.length <= 0) {
						this.multipleSelectionAll = this.multipleSelection;
						return;
					}
					// 总选择里面的key集合
					var selectAllIds = [];
					this.multipleSelectionAll.forEach(function(row) {
						selectAllIds.push(row[idKey]);
					});
					var selectIds = []
					// 获取当前页选中的id
					this.multipleSelection.forEach(function(row) {
						selectIds.push(row[idKey]);
						// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
						if(selectAllIds.indexOf(row[idKey]) < 0) {
							that.multipleSelectionAll.push(row);
						}
					});
					var noSelectIds = [];
					// 得到当前页没有选中的id
					this.tableData.forEach(function(row) {
						if(selectIds.indexOf(row[idKey]) < 0) {
							noSelectIds.push(row[idKey]);
						}
					});
					noSelectIds.forEach(function(id) {
						if(selectAllIds.indexOf(id) >= 0) {
							for(var i = 0; i < that.multipleSelectionAll.length; i++) {
								if(that.multipleSelectionAll[i][idKey] == id) {
									// 如果总选择中有未被选中的，那么就删除这条
									that.multipleSelectionAll.splice(i, 1);
									break;
								}
							}
						}
					});
				}
			}),
			mounted: function() {
				// 初始请求数据
				queryList.call(this);
			}
		});

		function queryList(currentPage) {
			_vue ? "" : _vue = this;
			_vue.loading = true;
			if(currentPage) {
				_vue.$refs.pagination.internalCurrentPage = currentPage;
			}
			$.ajax({
				url: "${ctx}/goods/list",
				type: "POST",
				cache: false,
				data: {
					goods_spec: _vue.search.goods_spec,
					goods_brand: _vue.search.goods_brand,
					goods_type: _vue.search.goods_type,
					status: 0,
					cpage: currentPage || _vue.$refs.pagination.internalCurrentPage,
					pagesize: _vue.$refs.pagination.internalPageSize
				},
				success: function(data) {
					_vue.loading = false;
					_vue.tableData = data.result.list;
					_vue.pagination.total = data.result.totalRow;
					_vue.pagination.pageSize = data.result.pageSize;
					setTimeout(function() {
						_vue.setSelectRow();
					}, 50);
				},
				error: function(xhr, msg, e) {},
				complete: function() {
					_vue.loading = false;
				}
			});
		}
	</script>
</@layout>